<template>
  <div class="safeguarding" style="margin-top: -50px">
    <div class="topImg">
      <div>
        <img
          src="https://static.cdpservice.com/image/banner/生活维权.jpg"
          alt=""
        />
      </div>
      <img
        src="https://static.cdpservice.com/image/banner/生活维权.jpg"
        alt=""
      />
    </div>
    <div class="serviceContent">
      <!-- 真实案例 -->
      <div class="mallactivity dlex2-div">
        <div class="navTitle">
          <p class="titleName">真实案例</p>
          <p class="titleenglish">REAL CASES</p>
        </div>
        <div
          class="mall"
          @click="$router.push('/safeguarding/caseList')"
          v-show="lifesafeguardlist.length"
        >
          <p>更多</p>
          <img src="@/assets/image/employment/mall.png" alt="" />
        </div>
      </div>
      <!-- 案例列表 -->
      <ul class="servicesList">
        <li
          class="listDiv"
          v-for="(item, index) in lifesafeguardlist"
          @click="goDetail(item.lifeSafNo, '案例')"
          :key="index"
        >
          <p class="title">{{ item.title }}</p>
          <p class="contenttext">{{ item.abstracts }}</p>
          <p class="time">{{ item.publishDate }}</p>
        </li>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 50px auto"
          v-if="lifesafeguardlist.length < 1 && flag"
        />
      </ul>
      <!-- 知识问答 -->
      <div class="mallactivity">
        <div class="navTitle">
          <p class="titleName">法律知识</p>
          <p class="titleenglish">LEGAL KNOWLEDGE</p>
        </div>
        <div class="dlex2-div" style="width: 335px">
          <a-input
            style="width: 250px; height: 38px !important"
            v-model="msgons"
            placeholder="请输入关键字"
            class="searchInput"
          />
          <div
            class="searchIcon"
            style="padding: 11px; height: auto; width: auto"
            @click="search()"
          >
            <img style="width: 16px" src="@/assets/image/icon1.png" alt="" />
            <span>搜索</span>
          </div>
        </div>
      </div>
      <ul class="knowledges">
        <li v-for="(item, index) in KnowledgeList" :key="index + 'add'">
          <div class="dlex2-div title">
            <!-- <div v-show="item.category != null" class="titlenav">
              <div>{{ item.category }}</div>
            </div> -->
            <p class="innertext">
              {{ item.title }}
            </p>
          </div>
          <div class="knowcontent">
            <p
              class="innercontent"
              :class="!item.checked ? '' : 'contentactive'"
              v-html="item.content"
            ></p>
            <div class="func dlex2-div">
              <div style="flex: 1">
                <span class="titleTxt7"> 来源：{{ item.source }} </span>
              </div>
              <div v-if="item.content.length > 320">
                <div class="show" v-if="!item.checked" @click="show(index)">
                  <p>阅读全文</p>
                  <img src="@/assets/image/employment/bottom.png" alt="" />
                </div>
                <div class="show" v-if="item.checked" @click="show(index)">
                  <p>收起</p>
                  <img src="@/assets/image/employment/top.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 50px auto"
        v-if="KnowledgeList.length < 1 && flag"
      />
    </div>
    <div class="cnBottom" v-if="KnowledgeList.length > 1">
      <div style="margin: 0 auto; width: 230px">
        <a-button @click="more()" v-show="btnState == 1" class="sobtn"
          >点击加载更多</a-button
        >
        <a-button v-show="btnState == 2" class="sobtn" :loading="true"
          >正在加载中</a-button
        >
        <span style="text-align: center" class="timeTxt1" v-if="btnState == 3"
          >没有更多了</span
        >
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      flag: false,
      // 真实案例列表
      lifesafeguardlist: [],
      // 知识问答列表
      KnowledgeList: [],
      pageIndex: 1,
      btnState: 1,
      msgons: "",
      onLoading: false,
    };
  },
  created() {
    this.getlifesafeguardlist();
    // 获取知识问答列表
    this.getKnowledgeList();
  },
  methods: {
    // 跳转详情页
    goDetail(id, type) {
      this.$router.push("/details/details?id=" + id + "&from=4&type=" + type);
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getKnowledgeList(this.pageIndex);
    },
    // 获取真实案例列表
    getlifesafeguardlist() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/lifesafeguard/list?pageSize=4&pageIndex=1",
        method: "post",
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.lifesafeguardlist = res.data.list;
        } else {
          this.onLoading = false;
        }
      });
    },
    show(e) {
      this.KnowledgeList[e].checked = !this.KnowledgeList[e].checked;
      // console.log(this.KnowledgeList[e].checked, e);
    },
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.pageIndex = 1;
        this.KnowledgeList = [];
        this.getKnowledgeList();
      }
    },
    search() {
      this.pageIndex = 1;
      this.KnowledgeList = [];
      this.getKnowledgeList();
    },
    // 知识问答列表
    getKnowledgeList() {
      let ber = [];
      this.$ajax({
        url:
          "/news/knowqa/qaList?pageSize=" + 10 + "&pageIndex=" + this.pageIndex,
        method: "post",
        dataType: "JSON",
        params: {
          localtion: 1,
          title: this.msgons,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          ber = res.data.list;
          for (var i in ber) {
            this.KnowledgeList.push(ber[i]);
          }
          // 为每个元素添加flag
          this.KnowledgeList.forEach((value, index) => {
            this.$set(value, "checked", false);
          });
          // 判断查询数据的长度
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.KnowledgeList = [];
          this.btnState = 3;
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.safeguarding {
  background-image: url("~@/assets/image/employment/backimg.png");
  background-color: #f8f8f8;
  background-size: 100% auto;
  min-height: calc(100vh - 284px);
  .topImg {
    max-width: 100% !important;
    // min-height:800px;
    max-height: 693px;
    overflow: hidden;
    div {
      width: 100%;
      max-height: 693px;
      z-index: 0;
      position: absolute;
      filter: blur(10px);
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 800px;
      z-index: 1;
      position: relative;
    }
  }
  .serviceContent {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    .mallactivity {
      display: flex;
      justify-content: space-between;
      .navTitle {
        width: 400px !important;
        flex: 1;
      }
    }
    .servicesList {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
      margin-bottom: 70px;
      li {
        width: 590px;
        padding: 24px 25px;
        background-color: #ffffff;
        margin-right: 20px;
        margin-bottom: 20px;
        .title {
          display: block;
          font-family: "苹方-简 中黑体";
          font-weight: bolder;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #333333;
          font-size: 18px;
          transition: color 0.3s linear;
          padding-bottom: 2px;
        }
        .contenttext {
          margin-top: 16px;
          font-size: 16px;
          font-family: PingFang SC;
          line-height: 24px;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; /*行数*/
          -webkit-box-orient: vertical;
        }
        .time {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 14px;
          margin-top: 16px;
          display: block;
          height: 14px;
          transition: color 0.3s linear;
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }

    .knowledges {
      margin-top: 30px;
      li {
        padding: 24px 40px 32px;
        background-color: #ffffff;
        margin-bottom: 16px;
        .title {
          display: flex;
          .identification {
            font-size: 53px;
            line-height: 20px;
            color: #fb6d00;
          }
          .innertext {
            color: #333333;
            font-size: 18px;
            line-height: 25px;
            font-weight: bold;
          }
        }
        .knowcontent {
          position: relative;
          margin-top: 22px;
          .innercontent {
            color: #333333;
            font-size: 15px;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /*行数*/
            -webkit-box-orient: vertical;
          }
          .contentactive {
            -webkit-line-clamp: 10000;
          }
          .func {
            margin-top: 17px;
            padding-top: 17px;
            border-top: 1px solid #eeeeee;
            width: 100%;
            position: relative;
            .show {
              text-align: right;
              position: absolute;
              right: 0;
              top: 10px;
            }
          }
          .show {
            // position: absolute;
            // right: 0;
            width: 115px;
            padding-left: 25px;
            // bottom: 3px;
            background: #ffffff;
            display: flex;
            cursor: pointer;
            p {
              color: #0d4fae;
              font-size: 15px;
              line-height: 21px;
            }
            img {
              width: 20px;
              margin-left: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
